import React, { Component } from 'react'
import { connect } from 'react-redux'
import { findDOMNode } from 'react-dom'
import QaItem from './qaItem'

class QaList extends Component {
  needScrollToBottom = false
  renderItem() {
    const { list } = this.props
    const ls = []
    list.map((item, index) => {
      ls.push(
        <QaItem item={item} key={index} index={index} />
      )
    })
    return ls
  }
  componentDidMount() {
    this.setWidth()
  }
  componentDidUpdate() {
    this.setWidth()
  }
  setWidth = () => {
    return
    const windowWidth = document.body.clientWidth
    const width = windowWidth > 1000 ? 1000 : windowWidth
    const clientHeight = this.listDiv.clientHeight
    const scrollHeight = this.listDiv.scrollHeight
    if (scrollHeight > clientHeight) {
      findDOMNode(this.listDiv).style.width = width + 18 + 'px'
    } else {
      findDOMNode(this.listDiv).style.width = width + 'px'
    }
  }
  render() {
    return (
      <div onScroll={this.onScroll} className="qa_list" ref={r=>this.listDiv=r}>
        {this.renderItem()}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.ReplayState.qa.list
  }
}

export default connect(mapStateToProps)(QaList)
